import React, { useEffect, useState,Key } from "react";
import { Row, Col, Card, Tree, Tag, Pagination, Table ,Button} from "antd";
import { useNavigate, useParams } from "react-router-dom";
import { 
  hosScheduleListRequest,
  hosScheduleRuleRequest,
  findSchedulListRequest
 } from "@/api/hospital/hospitalList";
import {
   hosDepartmentListType,
   bookingScheduleListType,
   findScheduleListType
   } from "@/api/hospital/model/hospitalListTypes";
export default function HospitalSchedule() {
  const navigate = useNavigate()

  //配置基础的医院编码
  const { hoscode } = useParams()
  //配置基础的tree解构
  const [treeData, setTreeData] = useState<hosDepartmentListType>([])
  //定义一个时间排班规则的当前页码
  const [page, setPage] = useState(1);
  //定义一个时间排班规则的每页条数
  const [limit, setLimit] = useState(3);
  //定义当前选中的科室
  // const [depCode, setDepCode] = useState("200040878");
  //定义当前科室的排班规则
  const [scheduleRule, setScheduleRule] = useState<bookingScheduleListType>([]);
  //定义当前科室的排班规则总条数
  const [total, setTotal] = useState(0);
  // 定义当前那个选中时间
  // const [workDate,setWorkDate] = useState('2022-04-28')
  //定义表格的数据
  const [sourceDate,setSourceDate] = useState<findScheduleListType>([])

   
  //1.封装的函数：进入页面开始按照对应的hoscode找对对应的医院科室
  const gethoscode = async ()=>{
    const result  = await hosScheduleListRequest(hoscode as string)
    //返回12个门诊部门 和每个门诊部门对应的时间
    setTreeData(result)
    return result
  }
  //2.封装的函数：根据page，limit，hoscode，depcode 加载更新的时间班次
  const getPlhd = async (depcode:string)=>{
    
    const result  =  await  hosScheduleRuleRequest({
      page: page,
      limit: limit,
      hoscode: hoscode as string,
      depcode,
    })
    setScheduleRule(result.bookingScheduleList)
    setTotal(result.total )  

    return result
  }
  //3.封装的函数：根据对应的时间和depcode找对排班主任表格
    const getDirector =async (depcode:string,workDate:string)=>{
      const result = await  findSchedulListRequest({
        hoscode  : hoscode as string, 
        depcode ,
        workDate 
      })
         setSourceDate(result)
         return result
    }
  useEffect(() => {
      (   async function(){
        //进入页面先调用函数拿到科室表
          const   departmentList   =  await gethoscode()
        //根据科室表，将默认的第一个初始的depcode加入到函数中，然后调用二哥函数用来查找对应的时间表
        const depcode =  (departmentList[0].children as hosDepartmentListType)[0].depcode
        const initDepCode = await getPlhd(depcode)
        //根据时间然后再加载对应主任的排班
        const  workDate = initDepCode.bookingScheduleList[0].workDate
            await getDirector(depcode,workDate)
      })()
  }, [page,limit])

  
  //table结构
  const columns = [
    {
      title: "序号",
      render(_: any, __: any, index: number) {
        return index + 1;
      },
    },
    {
      title: "职称",
      dataIndex: "title"
    },
    {
      title: "号源时间",
      dataIndex: "workDate"
    },
    {
      title: "可预约数",
      dataIndex: "reservedNumber"
    },
    {
      title: "挂号费用",
      dataIndex: "amount"
    },
    {
      title: "擅长技能",
      dataIndex: "skill"
    },
  ];
  const treeStyle = {
    border: "1px solid #000",
    height: "480px",
    overflow: "auto",
  };
  return (
    <Card>
      <p>选择:北京协和医院/多发性硬化专科门诊/2022-04-08</p>
      <Row gutter={20}>
        <Col span={5}>
          <div>
            <Tree 
            treeData={treeData as []} 
            style={treeStyle} 
            fieldNames={{
              title:'depname',key:'depcode'
            }}
            expandedKeys={['a4e171f4cf9b6816acdfb9ae62c414d7']}
            
            onSelect={(key)=>{
              //点击事件当更换key的时候将变化的key传输给函数
              getPlhd(key[0]  as string)     
              //点击函数后 再一次调用排版函数
              getDirector(key[0]  as string,'2022-04-28')
            }}
            />
          </div>
        </Col>
        <Col span={19}>
          <div style={{ marginBottom: "20px" }}>
            {
              scheduleRule.map(item=>{
                return <Tag 
                key={item.workDate} 
                //点击事件 当点击时间 该变workDate
                 onClick={()=>{

                  getDirector("200040878",item.workDate)
                 }}
                 style={{cursor:'pointer'}}
                 >
                                <p>{item.workDate}</p>
                                <p>{item.availableNumber}/{item.reservedNumber}</p>
                          </Tag>
              })
            }
          </div>
          
          <Pagination 
            current={page}
            pageSize={limit}
            total={total}
            onChange={(page: number, pageSize: number)=>{          
              setLimit(pageSize)
              setPage(page)
            }}
          />

          <Table 
          columns={columns} 
          style={{ marginTop: "20px" }}
          dataSource={sourceDate}
          rowKey={'id'}
          pagination={false}
          ></Table>
          <br />
          <Button onClick={()=>{navigate(-1)}} >返回</Button>
        </Col>
      </Row>
    </Card>
  );
}
